<template>
  <div v-loading="loading" class="app-container">
    <div class="filter-container">

      <!-- 头部导航搜索添加等 -->
      <div>
        <el-input v-model="listQuery.title" placeholder="输入关键词" style="width: 200px;" class="filter-item"
          @input="handleFilter()" @keyup.enter.native="handleFilter" />

          <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
        </el-select>

        <el-select v-model="listQuery.sort" style="width: 140px; margin-left: 10px;" class="filter-item"
          @change="handleFilter">
          <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
        </el-select>
        <el-select v-model="listQuery.people_id"
        @change="handleFilter"
        style="width: 140px; margin-left: 10px;" class="filter-item"
        filterable
        placeholder="搜索负责人">
            <el-option
              v-for="item in [
                {
                  name:'全部',
                  id:null
                },
                ...people_list
              ]"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="listQuery.ui_id"
          @change="handleFilter"
          style="width: 140px; margin-left: 10px;" class="filter-item"
          filterable
          placeholder="搜索ui负责人">
              <el-option
                v-for="item in [
                  {
                    name:'全部ui负责人',
                    id:null
                  },
                  ...people_list
                ]"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <!-- <el-select v-model="listQuery.url_type"
            @change="handleFilter"
            style="width: 140px; margin-left: 10px;" class="filter-item"
            filterable
            placeholder="所在服务器">
              <el-option
                v-for="item in [
                  {
                    name:'全部服务器',
                    id:null
                  },
                  {
                    name:'小（不理想的所在）',
                    id:2
                  },
                  {
                    name:'首次访问（备用尽量少放东西）',
                    id:3
                  },
                  {
                    name:'最大（所有大项目第一天）',
                    id:4
                  },
                  {
                    name:'主要（过了第一天的项目）',
                    id:5
                  },
                ]"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select> -->
          <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
            @click="handleCreate">
            新增
          </el-button>

          <el-button

            class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-delete"
            @click="handleDelete(0,1)">
            批量删除
          </el-button>
          <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-camera"
            @click="clone(0,1)">
            批量克隆
          </el-button>

      </div>
      <el-collapse v-if='all_type==0'>
        <el-collapse-item title="更多筛选:" name="1">
          <div style="float: left;color: #000000;line-height: 30px;margin-left: 10px;height: 46px;">
            按开始时间筛选：
            <el-date-picker
              @change="handleFilter_time_str"
              v-model="listQuery.time_str"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </div>
          <div style="float: left;color: #000000;line-height: 30px;margin-left: 10px;height: 46px;">
            按结束时间筛选：
            <el-date-picker
              @change="handleFilter_time_end"
              v-model="listQuery.time_end"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </div>
        </el-collapse-item>
      </el-collapse>


      <div>

      </div>


    </div>

    <!-- 列表主体 -->
    <el-table
    :data="tableData"
    border
    fit
    highlight-current-row
    style="width: 100%;"
    @selection-change="handleSelectionChange"
    @sort-change="sortChange">
      <!--  -->
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column label="列表图" fixed align="center" v-if='screenWidth>=750'>
        <template slot-scope="{row}">
          <el-image
                 style="width: 170px;"
                 :src="row.banner"
                 fit="contain">
          </el-image>

        </template>


      </el-table-column>
      <el-table-column label="基本信息" fixed  align="left">
        <template slot-scope="{row}">
          <div style="width: 100%;">

            <div>
              <h2>ID：{{ row.id }}</h2>
              <h2>活动名称：{{ row.title }}</h2>
              <p>活动报名时间段：{{ row.bm_time_str | parseTime('{y}-{m}-{d} {h}:{i}') }}-{{ row.bm_time_end | parseTime('{y}-{m}-{d} {h}:{i}') }}</p>
              <p>活动开始投票时间段：{{ row.ks_time_str | parseTime('{y}-{m}-{d} {h}:{i}') }}-{{ row.ks_time_end | parseTime('{y}-{m}-{d} {h}:{i}') }}</p>
            </div>


            <div>
              <el-input @blur='update_beizhu(row.id,row.beizhu)' v-model="row.beizhu"></el-input>
            </div>

          </div>

        </template>


      </el-table-column>

      <el-table-column label="活动数据"  align="left">
        <template slot-scope="{row}">
          <h3>
            <span>显示访问量：{{row.uv}}次</span>、
            <span>实际访问量：{{row.uv_in}}次</span>
          </h3>
          <h3>
            <span>总人数：{{row.register_count}}人</span>、
            <span>总票数：{{row.register_number}}票</span>
          </h3>
          <h3 style="color: red;">总收益：{{row.allncome}}元、今日收益：{{row.allncome_day}}元</h3>
          <!-- <dataInfo v-if="!loading" :id='row.id'></dataInfo> -->
        </template>
      </el-table-column>



      <el-table-column fixed='right' label="操作" align="center" class-name="small-padding fixed-width"  v-if='screenWidth>=750'>
        <template slot-scope="{row,$index}">

          <div>
            <el-button type="primary" size="mini"
              @click="handleUpdate(row)">
              修改
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row.id)">
              删除
            </el-button>
            <el-button type="success" size="mini"
              @click="go_register(row.id)">
              报名列表
            </el-button>
            <el-button type="success" size="mini"
              @click="go_shuju_data(row.id)">
              数据列表
            </el-button>
          </div>

          <div  style="margin-top: 10px;">
            <el-button type="success" size="mini"
              @click="go_pinglun_data(row.id)">
              评论列表
            </el-button>
            <el-button type="success" size="mini"
              @click="go_liwu_list(row.id)">
              查看礼物列表
            </el-button>
            <el-button type="success" size="mini"
              @click="clone(row.id,0)">
              克隆
            </el-button>
          </div>

          <div style="margin-top: 10px;">

              <!-- <el-popover
                placement="left"
                width="450"
                trigger="click">
                <div  class="html">
                  <infoList :row='row'></infoList>
                </div>
                <el-button slot="reference" style="margin-bottom: 10px;">基础信息</el-button>
              </el-popover> -->
              <el-popover
                placement="left"
                width="170"
                trigger="click">
                <div  class="html">
                  <el-popover
                    placement="left"
                    width="450"
                    trigger="click">
                    <div  class="html">
                       weixin://dl/business/?appid={{config.wx_appid_man.value}}&path=pagesfen1/pages/index/index&query={{encodeURIComponent('id='+row.id)}}
                    </div>
                    <el-button slot="reference" style="margin-bottom: 10px;">查看跳转链接</el-button>
                  </el-popover>
                  <el-popover
                    placement="left"
                    width="450"
                    trigger="click">
                    <div  class="html">
                       <el-image
                             style="width: 400px; height: 400px"
                             :src="row.ewm"
                             :preview-src-list="[
                               row.ewm
                             ]"
                             fit="cover">
                       </el-image>
                    </div>
                    <el-button slot="reference" style="margin-bottom: 10px;">查看活动二维码</el-button>
                  </el-popover>

                </div>
                <el-button slot="reference" style="margin-bottom: 10px;">查看二维码</el-button>
              </el-popover>



            </div>










        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total>0" :page-sizes="pagesizes" :total="total" :page.sync="listQuery.page"
      :limit.sync="listQuery.limit" @pagination="list" />

    <!-- 添加修改 -->
    <el-dialog width='80%' v-if='dialogFormVisible' :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="temp" label-position="top" label-width="70px"
        style="width: 90%; margin:0 auto">


        <el-divider content-position="center">
          <h2>活动基础信息</h2>
        </el-divider>
        <el-row  :gutter="20">
          <el-col :span="24">
              <el-form-item label="活动名" prop="name">
                <el-input v-model="temp.title" placeholder="请输入活动名" />
              </el-form-item>
          </el-col>

        </el-row>
        <el-row  :gutter="20">
          <el-col :span="12">
              <el-form-item label="分享图标题" prop="name">
                <el-input v-model="temp.back_title" placeholder="请输入活动名" />
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="主办方" prop="name">
                <el-input v-model="temp.zbf" placeholder="请输入活动名" />
              </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item label="公告" prop="name">
                <el-input v-model="temp.model_Announcement" placeholder="请输入公告" />
              </el-form-item>
          </el-col>
        </el-row>
        <el-row  :gutter="20">
          <el-col :span="4">
              <el-form-item label="活动类型" prop="name">
                <el-select v-model="temp.is_type" filterable placeholder="输关键词入可搜索">
                    <el-option
                      :key="0"
                      label="纯礼物"
                      :value="0">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="选择负责人" prop="name">
                <el-select style="width: 100%;" v-model="temp.people_id" filterable placeholder="输关键词入可搜索">
                    <el-option
                      v-for="item in people_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="选择ui负责人" prop="name">
                <el-select style="width: 100%;" v-model="temp.ui_id" filterable placeholder="输关键词入可搜索">
                    <el-option
                      v-for="item in people_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="浏览量" prop="name">
                <el-input-number style="width: 100%;" v-model="temp.uv" placeholder="浏览量" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="额外票数" prop="name">
                <el-input-number style="width: 100%;" v-model="temp.xn_number" placeholder="额外票数" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="活动开始状态" prop="name">
                <el-select style="width: 100%;" v-model="temp.is_kai" filterable placeholder="输关键词入可搜索">
                    <el-option
                      :key="0"
                      label="开始"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="结束"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>



        <el-row  :gutter="20">

          <el-col :span="4">
              <el-form-item label="可上传几张照片" prop="name">
                <el-input-number style="width: 100%;" v-model="temp.model_update_img_number" :min='1' />
              </el-form-item>
          </el-col>

          <el-col :span="10">
              <el-form-item label="报名时间" prop="name">
                <el-date-picker
                  style="width: 100%;"
                  v-model="bmsj"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right">
                </el-date-picker>
              </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="投票时间" prop="name">
                <el-date-picker
                  style="width: 100%;"
                  v-model="tpsj"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right">
                </el-date-picker>
              </el-form-item>
          </el-col>

          <el-col :span="6">
              <el-form-item label="活动类型" prop="name">
                <el-select style='width: 100%;' v-model="temp.model_is_video" placeholder="请选择">
                    <el-option
                      :key="0"
                      label="照片活动"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="视频活动"
                      :value="1">
                    </el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="是否每日刷新投票次数" prop="name">
                <el-select style='width: 100%;' v-model="temp.model_is_day_t" placeholder="请选择">
                    <el-option
                      :key="0"
                      label="是"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="否"
                      :value="1">
                    </el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="每日可投几票" prop="name">
                <el-input-number style='width: 100%;' :min='1' v-model="temp.model_day_t_num" placeholder="请输入投票次数" />
              </el-form-item>
          </el-col>
          <el-col :span="3">
              <el-form-item label="是否可送礼物" prop="name">
                <el-select style='width: 100%;' v-model="temp.model_is_liwu" placeholder="请选择">
                    <el-option
                      :key="0"
                      label="是"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="否"
                      :value="1">
                    </el-option>
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="3">
              <el-form-item label="礼物组" prop="name" v-if='temp.model_is_liwu==0'>
                <el-select style='width: 100%;' v-model="temp.model_liwu_id" placeholder="请选择">
                    <el-option
                      v-for="item in Gift_group"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </el-option>

                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="选择列表图类型" prop="name">
                <el-select v-model="temp.is_list_shipin" filterable placeholder="输关键词入可搜索">
                    <el-option
                      :key="0"
                      label="图片"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="视频"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>

        </el-row>
        <el-divider content-position="center">
          <h2>展示开关</h2>
        </el-divider>
        <el-row  :gutter="20">
          <el-col :span="4"  v-if="userInfo.is_daili==0">
              <el-form-item label="是否展示在列表页" prop="name">
                <el-select style="width: 100%;" v-model="temp.is_list" filterable placeholder="输关键词入可搜索">
                    <el-option
                      :key="0"
                      label="展示"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="不展示"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="自定义选项展示" prop="name">
                <el-select style="width: 100%;" v-model="temp.is_zdy_show" filterable placeholder="输关键词入可搜索">
                    <el-option
                      :key="0"
                      label="展示"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="不展示"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="是否展示奖品介绍" prop="name">
                <el-select style='width:100%' v-model="temp.is_jp_msg" filterable placeholder="是否展示奖品介绍">
                    <el-option
                      :key="0"
                      label="展示"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="不展示"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="是否展示活动详情" prop="name">
                <el-select style='width:100%' v-model="temp.is_hdxq_show" filterable placeholder="是否展示奖品介绍">
                    <el-option
                      :key="0"
                      label="展示"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="不展示"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="是否展报名" prop="name">
                <el-select style='width:100%' v-model="temp.is_baoming_an_show" filterable placeholder="是否展示奖品介绍">
                    <el-option
                      :key="0"
                      label="展示"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="不展示"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="是否展示排行榜" prop="name">
                <el-select style='width:100%' v-model="temp.is_phb_an" filterable placeholder="是否展示奖品介绍">
                    <el-option
                      :key="0"
                      label="展示"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="不展示"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="是否展示留言" prop="name">
                <el-select style='width:100%' v-model="temp.is_liuyan_show" filterable placeholder="是否展示留言">
                    <el-option
                      :key="0"
                      label="展示"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="不展示"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="是否开启防狙击模式" prop="name">
                <el-select style='width:100%' v-model="temp.is_yincang" filterable placeholder="关闭重要数据的展示">
                    <el-option
                      :key="0"
                      label="不开启"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="开启"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="展示几条礼物" prop="name">
                <el-input-number style="width: 100%;" v-model="temp.liwu_number" :min="0" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="可展示几条排行榜" prop="name">
                <el-input-number style="width: 100%;" v-model="temp.model_ph_number" :min='1' />
              </el-form-item>
          </el-col>
        </el-row>



        <el-divider content-position="center">
          <h2>自定义相关（选项全部可为控，空为默认）</h2>
        </el-divider>
        <el-row  :gutter="20">
          <el-col :span="4">
              <el-form-item label="报名【姓名】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.bm_name" placeholder="请输入【姓名】" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="报名【姓名提示字】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.bm_name_str" placeholder="请输入【姓名提示字】" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="报名【手机号】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.bm_phone" placeholder="请输入【手机号】" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="报名【手机号提示字】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.bm_phone_str" placeholder="请输入【手机号提示字】" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="报名【参赛宣言】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.bm_msg" placeholder="请输入【参赛宣言】" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="报名【参赛宣言提示字】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.bm_msg_str" placeholder="请输入【参赛宣言提示字】" />
              </el-form-item>
          </el-col>


          <el-col :span="4">
              <el-form-item label="投票相关字眼" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.tp_name" placeholder="请输入【投票相关字眼】" />
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="首页【报名人数】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.bmrs_str" placeholder="请输入【报名人数提示字】" />
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="首页【总票数】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.zps_str" placeholder="请输入【总票数提示字】" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="首页【浏览次数】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.llcs_str" placeholder="请输入【浏览次数提示字】" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="选手页【选手相册】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.xsxc_str" placeholder="请输入【选手相册提示字】" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="选手页【票数】" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.ps_str" placeholder="请输入【票数提示字】" />
              </el-form-item>
          </el-col>


          <el-col :span="4">
              <el-form-item label="票单字（爱心值）" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.p_str" placeholder="请输入【票单字为何】" />
              </el-form-item>
          </el-col>
          <el-col :span="4">
              <el-form-item label="商城姓名" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.zdy_shop_name" placeholder="请输入【商城姓名】" />
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="唤起商城文字" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.hqsc_str" placeholder="请输入【唤起商城文字】" />
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="赠送礼物文字" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.zslw_str" placeholder="请输入【赠送礼物文字】" />
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="更多助力助力提示" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.tpts1_str" placeholder="请输入【更多助力助力提示】" />
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="助力成功，感谢支持" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.tpts2_str" placeholder="请输入【助力成功，感谢支持】" />
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="继续为TA助力" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.tpts3_str" placeholder="请输入【继续为TA助力】" />
              </el-form-item>
          </el-col>

          <el-col :span="4">
              <el-form-item label="今日您已投票" prop="name">
                 <el-input style='width: 100%;' :min='1' v-model="temp.tpts4_str" placeholder="请输入【今日您已投票】" />
              </el-form-item>
          </el-col>
        </el-row>



        <el-divider content-position="center">
          <h2>安全相关（防刷票）</h2>
        </el-divider>

        <el-row  :gutter="20">
          <el-form-item label="每日投票上限" prop="name">
             <el-input-number style='width: 100%;' :min='500' v-model="temp.day_tp_number" placeholder="请输入每日投票上限" />
          </el-form-item>
        </el-row>





        <el-divider content-position="center">
          <h2>主题色</h2>
        </el-divider>
        <el-row  :gutter="20">
          <el-col :span="3">
              <el-form-item label="选择主色调" prop="name">
                 <el-color-picker v-model="temp.model_color1"></el-color-picker>
              </el-form-item>
          </el-col>
          <el-col :span="3">
              <el-form-item label="选择辅色调" prop="name">
                 <el-color-picker v-model="temp.model_color2"></el-color-picker>
              </el-form-item>
          </el-col>
          <el-col :span="3">
              <el-form-item label="选择授权按钮色" prop="name">
                 <el-color-picker v-model="temp.sq_color"></el-color-picker>
              </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="center">
          <h2>图片信息</h2>
        </el-divider>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item v-if='!temp.is_list_shipin' label="列表展示页图片" prop="name">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :action="lujing"
                :on-success="handleAvatarSuccess"

              >
                <img v-if="temp.banner" :src="temp.banner" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
            <el-form-item v-if='temp.is_list_shipin==1' label="上传列表视频" prop="name">
              <el-upload
                v-if='dialogFormVisible'
                class="upload-demo"
                :action="lujing2"
                :on-success="yinpin_c"
                :on-remove="yinpin_s"
                accept=".mp3, .mp4"
                :file-list="yin_file_list"
                :limit="1"
                >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="海报背景图" prop="name">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :action="lujing"
                :on-success="handleAvatarSuccess_fenx"

              >
                <img v-if="temp.model_background" :src="temp.model_background" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="活动页详情信息背景图" prop="name">
               <el-upload
                 class="avatar-uploader"
                 :show-file-list="false"
                 :action="lujing"
                 :on-success="handleAvatarSuccess_fenbj"

               >
                 <img v-if="temp.mode_titleback" :src="temp.mode_titleback" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon" />
               </el-upload>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <!-- <el-form-item label="上传排行榜banner" prop="name">
               <el-upload
                 class="avatar-uploader"
                 :show-file-list="false"
                 :action="lujing"
                 :on-success="handleAvatarSuccess_phbbanner"

               >
                 <img v-if="temp.model_phb_banner" :src="temp.model_phb_banner" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon" />
               </el-upload>
            </el-form-item> -->

            <el-form-item label="弹窗上icon图" prop="name">
               <el-upload
                 class="avatar-uploader"
                 :show-file-list="false"
                 :action="lujing"
                 :on-success="handleAvatarSuccess_phbbanner"

               >
                 <img v-if="temp.zdy_icon_url" :src="temp.zdy_icon_url" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon" />
               </el-upload>
            </el-form-item>
          </el-col>
        </el-row>






        <el-divider content-position="center">
          <h2>自定义信息</h2>
        </el-divider>
        <el-row  :gutter="20">
          <el-col :span="12" v-if='temp.is_fenzu==0||!temp.is_fenzu'>
              <el-form-item label="是否分组" prop="name">
                <el-select style="width: 100%;" v-model="temp.is_fenzu" filterable placeholder="输关键词入可搜索">
                    <el-option
                      :key="0"
                      label="不分组"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="分组"
                      :value="1">
                    </el-option>
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6" v-if='temp.is_fenzu==1'>
              <el-form-item label="是否分组" prop="name">
                <el-select style="width: 100%;" v-model="temp.is_fenzu" filterable placeholder="输关键词入可搜索">
                    <el-option
                      :key="0"
                      label="不分组"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="分组"
                      :value="1">
                    </el-option>
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6" v-if='temp.is_fenzu==1'>
              <el-form-item style="width: 100%;" label="选择分组" prop="name" v-if='temp.is_fenzu==1'>
                <el-select v-model="temp.fenzu_id" filterable placeholder="输关键词入可搜索">

                    <el-option
                      v-for="item in fenzulist"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>

                  </el-select>
              </el-form-item>
          </el-col>



          <el-col :span="12">
              <el-form-item label="自定义礼物logo" prop="name"  v-if='!temp.is_zdy_liwu_url'>
                <el-select style="width: 100%;" v-model="temp.is_zdy_liwu_url" filterable placeholder="输关键词入可搜索">
                    <el-option
                      :key="0"
                      label="否"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="是"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6" v-if='temp.is_zdy_liwu_url==1'>
              <el-form-item label="自定义礼物logo" prop="name">
                <el-select style="width: 100%;" v-model="temp.is_zdy_liwu_url" filterable placeholder="输关键词入可搜索">
                    <el-option
                      :key="0"
                      label="否"
                      :value="0">
                    </el-option>
                    <el-option
                      :key="1"
                      label="是"
                      :value="1">
                    </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6" v-if='temp.is_zdy_liwu_url==1'>
              <el-form-item v-if='temp.is_zdy_liwu_url==1' label="上传自定义logo" prop="name">
                <el-upload

                  class="avatar-uploader"
                  :show-file-list="false"
                  :action="lujing"
                  :on-success="handleAvatarSuccess_zdy_liwu"

                >
                  <img v-if="temp.zdy_liwu_url" :src="temp.zdy_liwu_url" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
          </el-col>

          <el-col :span="24">
              <el-form-item label="自定义字段" prop="name">
                <el-select
                    style="width: 100%;"
                    v-model="temp.zdy"
                    multiple
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请输入自定义字段">
                    <el-option
                      v-for="item in temp.zdy"
                      :key="item"
                      :label="item"
                      :value="item">
                    </el-option>
                </el-select>
              </el-form-item>
          </el-col>
        </el-row>






























        <el-form-item label="是否添加额外字段" prop="name">
          <el-select style="width: 100%;" v-model="temp.is_tz" filterable placeholder="输关键词入可搜索">
              <el-option
                :key="0"
                label="无拓展"
                :value="0">
              </el-option>
              <el-option
                :key="1"
                label="跳转小程序"
                :value="1">
              </el-option>
              <el-option
                :key="2"
                label="图文"
                :value="2">
              </el-option>
              <el-option
                :key="3"
                label="嵌入网页"
                :value="3">
              </el-option>
            </el-select>
        </el-form-item>

        <el-form-item v-if='temp.is_tz' label="拓展字段名" prop="name">
          <el-input v-model="temp.is_tz_name" placeholder="请输入拓展字段名" />
        </el-form-item>
        <el-form-item  v-if='temp.is_tz' label="拓展字段图标" prop="name">
          <el-input v-model="temp.is_tz_icon" placeholder="请输入拓展字段图标" />
        </el-form-item>

        <el-form-item  v-if='temp.is_tz==1' label="小程序appid" prop="name">
          <el-input v-model="temp.is_tz_txt" placeholder="请输小程序appid" />
        </el-form-item>
        <el-form-item  v-if='temp.is_tz==1' label="小程序path(页面路径)" prop="name">
          <el-input v-model="temp.path" placeholder="请输入小程序path(页面路径)" />
        </el-form-item>

        <el-form-item  v-if='temp.is_tz==3' label="跳转后完整网址" prop="name">
          <el-input v-model="temp.is_tz_txt" placeholder="跳转后完整网址" />
        </el-form-item>

        <el-form-item  v-if='temp.is_tz==2' label="跳转后完整网址" prop="name">
          <Tinymce
            v-if='dialogFormVisible'
            width='700px'
            v-model="temp.is_tz_txt" />
        </el-form-item>

        <el-divider content-position="center">媒体相关</el-divider>

        <el-form-item label="模板名称" prop="name">
          <el-input v-model="temp.model_title" placeholder="请输入模板名称(与活动名一致即可)" />
        </el-form-item>



        <el-form-item label="轮播图" prop="name">
          <el-upload
            v-if='dialogFormVisible'
            :action="lujing"
            list-type="picture-card"
            :on-preview="model_handlePictureCardPreview"
            :on-success="model_handleAvatarSuccess"
            multiple
            accept=".jpg, .jpeg,.png,.gif"
            :file-list="model_fileList"
            :on-remove="model_handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="model_dialogVisible">
            <img width="100%" :src="temp.model_banner" alt="">
          </el-dialog>
        </el-form-item>



        <el-form-item label="上传音频（二选其一）" prop="name">
         <el-upload
          v-if='dialogFormVisible'
           class="upload-demo"
           :action="lujing2"
           :on-success="yinpin_c2"
           :on-remove="yinpin_s2"
           accept=".mp3, .mp4"
           :file-list="yin_file_list2"
           :limit="1"
           >
           <el-button size="small" type="primary">点击上传</el-button>


         </el-upload>
        <el-input v-model="temp.model_music" placeholder="请输入音频路径" />


        </el-form-item>



        <!-- 从这里开始 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="首页活动介绍" prop="name">
               <Tinymce v-if='dialogFormVisible' width='100%' height='750' v-model="temp.model_index_hdjs" />
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-form-item label="活动说明" prop="name">
               <Tinymce v-if='dialogFormVisible' width='100%' height='750' v-model="temp.model_Description" />
            </el-form-item>

          </el-col>
          <el-col :span="8">
            <el-form-item label="奖品说明" prop="name">
               <Tinymce v-if='dialogFormVisible' width='100%' height='750' v-model="temp.model_jpsm" />
            </el-form-item>

          </el-col>
        </el-row>









        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
            确认
          </el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  // 引入api
  import api from '@/api/vote/activity.js'
  import ewm from '../ewm.vue'
  import Tinymce from '@/components/Tinymce'
  // 引入分页
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  //引入数据获取
  import dataInfo from "./common/data"
  //基础信息
  import infoList from "./common/info"

  export default {
    props:['all_type'],
    components: { Pagination,ewm ,Tinymce,dataInfo,infoList},
    data() {
      return {
        Gift_group:[],
        yin_file_list:null,
        yin_file_list2:null,
        tpsj:'',
        bmsj:'',
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        people_list:[],
        activitymodel:[],
        // 分页
        total: 0,
        lujing: JSON.parse(localStorage.getItem('Config'))['image_update']['value'],
        pagesizes: [10, 30, 60, 100],
        // 列表数据
        tableData: [],
        // 权限列表
        roleData: null,
        // 权限列表筛选用
        roleData_: [
          {
            id: 0,
            name: '全部权限'
          }
        ],
        // 根据权限筛选
        rolemodel: 0,
        // 提交数据
        temp: {

        },
        // 密码
        password: '',
        // 判定加载
        loading: false,
        // 判定where
        listQuery: {
          time_end:null,
          time_str:null,
          page: 1,
          limit: 10,
          title: null,
          sort: 'asc',
          ui_id:null,
          url_type:null
        },
        // 判定显示
        dialogFormVisible: false,
        // 判定修改or添加
        dialogStatus: '',
        // 判定修改id
        up_id: 0,
        // 列表匹配数据群
        textMap: {
          update: '修改',
          create: '添加'
        },
        affix2: [
          {
            value: 0,
            label: '保留'
          },
          {
            value: 1,
            label: '不保留'
          }
        ],
        show: [
          {
            value: 0,
            label: '展示'
          },
          {
            value: 1,
            label: '不展示'
          }
        ],
        sortOptions: [
          { label: 'ID 升序', key: 'asc' },
          { label: 'ID 降序', key: 'desc' }
        ],
        multipleSelection:'',
        fenzulist:null,
        model_dialogImageUrl:null,
        model_dialogVisible:false,
        model_fileList:[],
        is_zdy:0,
        lujing2: JSON.parse(localStorage.getItem('Config'))['video_update']['value'],
        screenWidth : window.innerWidth,
        config:JSON.parse(localStorage.getItem('Config')),
        userInfo:JSON.parse(localStorage.getItem('userInfo'))
      }
    },
    // 进入页面加载数据
    created() {
      console.log(this.screenWidth)
      this.list()
    },
    methods: {
      //修改备注
      update_beizhu(id,beizhu){
          this.loading = true
          var than = this
          api.update_beizhu({
              id:id,
              beizhu:beizhu
          }).then(res => {
            than.loading = false
            than.$notify({
              title: '提示',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          })
      },
      handleAvatarSuccess_phbbanner(response, file){
        this.temp.zdy_icon_url = response.data
        this.$forceUpdate()
      },
      handleAvatarSuccess_fenbj(response, file){
        this.temp.mode_titleback = response.data

        this.$forceUpdate()
      },
      up_banner(fileList){
        var arr = [];
        for(var i=0;i<fileList.length;i++){
          arr[arr.length] = fileList[i].url
        }
        this.temp.model_banner = arr

      },
      model_handleRemove(file, fileList) {

        this.up_banner(fileList)

      },
      yinpin_c2(response, file) {

        this.temp.model_music = response.data

        this.$forceUpdate()
      },
      yinpin_s2(file, fileList) {

        this.temp.model.music = null

      },
      handleAvatarSuccess_fenx(response, file){
        this.temp.model_background = response.data
        this.$forceUpdate()

      },
      model_handleAvatarSuccess(response, file){
        if(!this.temp.model_banner){
          this.temp.model_banner = [response.data]
        }else{
          this.temp.model_banner = [...this.temp.model_banner,response.data]
        }


        this.$forceUpdate()
      },
      model_handlePictureCardPreview(file) {
        this.model_dialogImageUrl = file.url;
        this.model_dialogVisible = true;
      },
      yinpin_c(response, file) {
        this.temp.is_list_shipin_url = response.data
        this.$forceUpdate()
      },
      yinpin_s(file, fileList) {

        this.temp.is_list_shipin_url = null

      },
      clone(id,type){
        if(id==0){
          id = ''
          for(var i=0;i<this.multipleSelection.length;i++){
              if(id==''){
                id = this.multipleSelection[i]['id']
              }else{
                id+= ','+this.multipleSelection[i]['id']
              }
          }
        }

        this.loading = true
        var than = this
        api.activity_clone({
          id:id,
          type:type
        }).then(res => {
           than.loading = false
           // this.list.unshift(this.temp)
           than.list()
           than.dialogFormVisible = false
           than.$notify({
             title: '提示',
             message: '克隆成功',
             type: 'success',
             duration: 2000
           })
           than.$emit('numberbh', 1)
        }).catch(() => {
          than.dialogFormVisible = false

        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;

      },
      handleAvatarSuccess(response, file) {
        this.temp.banner = response.data

        this.$forceUpdate()
      },
      handleAvatarSuccess_zdy_liwu(response, file) {
        this.temp.zdy_liwu_url = response.data

        this.$forceUpdate()
      },
      go_pinglun_data(id){

        this.$router.push({path:'/vote/toupiaolist',query:{id:id,type:2}});
      },
      go_shuju_data(id){
        this.$router.push({path:'/vote/shuju_data',query:{id:id}});
      },
      go_register(id){
        this.$router.push({path:'/vote/register',query:{id:id}});
      },
      go_info(id){

         this.$router.push({path:'/vote/gift_info',query:{id:id}});
      },
      // 冻结
      handleType(row, index, id, type) {
        var than = this
        var arr = ['解除冻结账号可正常登陆, 是否继续?', '冻结账号将无法正常登陆, 是否继续?']
        this.$confirm(arr[type], '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          api.frost({
            id: id,
            type: type
          }).then(() => {
            this.loading = false
            // this.list.unshift(this.temp)
            than.list()
            than.dialogFormVisible = false
            arr = ['禁用成功', '启用成功']
            than.$notify({
              title: '提示',
              message: arr[type],
              type: 'success',
              duration: 2000
            })
          })
        }).catch(() => {
          than.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 删除
      handleDelete(id,type=0) {
        if(id==0){
          id = ''
          for(var i=0;i<this.multipleSelection.length;i++){
              if(id==''){
                id = this.multipleSelection[i]['id']
              }else{
                id+= ','+this.multipleSelection[i]['id']
              }
          }
        }
        var than = this
        this.$confirm('该操作将永久删除该账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          api.del({
            type:type,
            id: id
          }).then(() => {
            this.loading = false
            // this.list.unshift(this.temp)
            than.list()
            than.dialogFormVisible = false
            than.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            than.$emit('numberbh', 1)
          })
        }).catch(() => {
          than.dialogFormVisible = false
          than.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 修改
      updateData() {
        this.loading = true
        var than = this

        this.temp.bm_time_str = this.bmsj[0]
        this.temp.bm_time_end = this.bmsj[1]
        this.temp.ks_time_str = this.tpsj[0]
        this.temp.ks_time_end = this.tpsj[1]
        than.dialogFormVisible = false
        api.update({

          id: this.up_id,
          temp: this.temp
        }).then(res => {
          than.list()

          // router.addRoutes(res)
        }).catch((res) => {

          than.loading = false
        })
      },
      // 添加
      createData() {
        this.loading = true
        var than = this



        this.temp.bm_time_str = this.bmsj[0]
        this.temp.bm_time_end = this.bmsj[1]
        this.temp.ks_time_str = this.tpsj[0]
        this.temp.ks_time_end = this.tpsj[1]
        than.dialogFormVisible = false
        api.save({

          temp: this.temp
        }).then(res => {
          than.list()

          // router.addRoutes(res)

        }).catch((res) => {

          than.loading = false
        })
      },
      // 还原提交数据
      resetTemp() {
        this.password = ''
        for (var key in this.temp) {
          delete this.temp[key]
        }
      },
      // 添加前钩子
      handleCreate(pid) {
        this.resetTemp(pid)
        this.model_fileList = []
        this.tpsj = ''
        this.bmsj = ''
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.yin_file_list = null
        this.yin_file_list2 = null
        this.temp.model = []
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      // 修改前钩子
      handleUpdate(row) {
        this.up_id = row.id
        var than = this
        api.get_update_msg({
          id:row.id
        }).then(res => {

          than.temp = Object.assign({}, res.data.list) // copy obj
          than.tpsj = [than.temp.ks_time_str,than.temp.ks_time_end]


          than.model_fileList = []
          for(var i=0;i<than.temp.model_banner.length;i++){
            than.model_fileList[than.model_fileList.length] = {
              name:i,
              url:than.temp.model_banner[i]
            }
          }
          than.yin_file_list2 = [{

              name:than.temp.model_music,
              url:than.temp.model_music

          }]
          than.bmsj = [than.temp.bm_time_str,than.temp.bm_time_end]

          than.dialogStatus = 'update'
          than.dialogFormVisible = true
          if(than.temp.is_list_shipin_url){
            than.yin_file_list = [{

                name:than.temp.is_list_shipin_url,
                url:than.temp.is_list_shipin_url

            }]
          }else{
            than.yin_file_list = []
          }
          than.$nextTick(() => {
            than.$refs['dataForm'].clearValidate()
          })

        })



      },
      getLocalTime(nS) {
         return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
      },
      // 获取列表
      list(title) {
        this.loading = true
        var than = this
        api.list2({
          all_type:this.all_type,
          role_id: this.rolemodel,
          listQuery: this.listQuery
        }).then(res => {
          than.Gift_group = res.data.Gift_group
          than.tableData = res.data.list
          than.total = res.data.count
          than.people_list = res.data.people
          than.activitymodel = res.data.activitymodel
          than.fenzulist = res.data.Fenzu
          than.loading = false
          // router.addRoutes(res)
        }).catch((res) => {

          than.loading = false
        })
      },
      // 排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'id') {
          this.sortByID(order)
        }
      },
      sortByID(order) {
        if (order === 'ascending') {
          this.listQuery.sort = 'asc'
        } else {
          this.listQuery.sort = 'desc'
        }
        this.handleFilter()
      },
      // 还原数据
      handleFilter() {
        this.listQuery.page = 1
        this.list()
      },
      handleFilter_time_str() {
        this.listQuery.page = 1
        this.listQuery.time_end = null
        this.list()
      },
      handleFilter_time_end() {
        this.listQuery.page = 1
         this.listQuery.time_str = null
        this.list()
      },
      //去礼物列表
      go_liwu_list(id){
          this.$router.push({path:'/vote/liwu_list',query:{id:id}});


      }
    }
  }
</script>
